<template>
  <div>
    <HeaderNav />
    <div class="total">
      <el-tabs
        :tab-position="tabPosition"
        style="height: 200px"
        class="demo-tabs"
      >
        <el-tab-pane>
          <template #label>
            <span class="tabs-label">
              <span>个人资料</span>
            </span>
          </template>
          <div class="content">
            <div>
              <span>个人资料</span>
            </div>
            <div>
              <el-avatar size="large" :src="userInfo.avatar" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span class="tabs-label">
              <span>账号设置</span>
            </span>
          </template>
          <div class="content"></div>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span class="tabs-label">
              <span>退出登录</span>
            </span>
          </template>
          <div class="content"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Edit, CirclePlus, FolderAdd } from "@element-plus/icons-vue";
import HeaderNav from "@/components/common/HeaderNav.vue";

const userInfo = reactive({
  avatar:
    "https://img2.woyaogexing.com/2022/07/09/5ad8b0a6962a1989!400x400.jpg",
  name: "UserName",
  Signature: "dasdsfaasdfasdfasdfasdf",
  num1: "134",
  num2: "12",
  num3: "340",
});
const tabPosition = ref("left");
</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;
span {
  cursor: pointer;
  font-weight: bold;
  color: grey;
  font-size: 0.14rem;
}
.total {
  height: auto;
  width: 5rem;
  margin-left: 1rem;
  margin-top: $item-height * 2;

  .content {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-left: 0.8rem;
  }

  .tabs-label {
    span {
      font-size: 0.11rem;
    }
  }
}
</style>
